<template>
  <div>
    <router-view>
      <div>
        <div style="height: 2vh;"></div>
        <el-card class="box-card">
          <template #header>
            <div style="font-size: 20px; font-weight: 600;">
              <span>病史记录</span>
            </div>
            <div style="height: 2vh;"></div>
          </template>
          <div>
            <el-table ref="multipleTableRef" style="width: 100%" stripe
              :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" v-loading="loading">
              <el-table-column label="序号" property="id" width="60" align="center" fixed />
              <el-table-column label="患者姓名" property="user_name" width="120" align="center" fixed />
              <el-table-column property="card" label="就诊卡号" width="140" align="center" />
              <el-table-column property="user_code" label="身份证号" show-overflow-tooltip width="180" align="center" />
              <el-table-column property="tel" label="手机号" show-overflow-tooltip width="140" align="center" />
              <el-table-column property="depart_name" label="挂号科室" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="price" label="挂号费" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="status" label="挂号状态" show-overflow-tooltip width="120" align="center">
                <template #default="scope">
                  <span v-if="scope.row.status === 1" style="color: rgb(228, 173, 55);"><el-tag class="ml-2"
                      type="warning">待审核 </el-tag></span>
                  <span v-if="scope.row.status === 2" style="color: rgb(29, 245, 21);"><el-tag class="ml-2"
                      type="success">预约成功</el-tag></span>
                  <span v-if="scope.row.status === 3" style="color: rgb(37, 130, 252);"><el-tag class="ml-2" type="">已就诊
                    </el-tag></span>
                  <span v-if="scope.row.status === 4" style="color: red;"><el-tag class="ml-2"
                      type="danger">驳回</el-tag></span>
                  <span v-if="scope.row.status === 5" style="color: rgb(85, 84, 84);"><el-tag class="ml-2"
                      type="info">已取消</el-tag></span>
                      <span v-if="scope.row.status === 6" style="color: rgb(77, 234, 10);"><el-tag class="ml-2"
                    type="success">就诊完成</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column property="doctor_name" label="医生名称" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="create_time" label="就诊日期" show-overflow-tooltip width="140" align="center" />
              <el-table-column property="time" label="时间区" show-overflow-tooltip width="80" align="center">
                <template #default="scope">
                  <span v-if="scope.row.time === 1" style="color: rgb(29, 245, 21);"><el-tag class="ml-2"
                      type="success">上午</el-tag></span>
                  <span v-if="scope.row.time === 2" style="color: rgb(230, 109, 35);"><el-tag class="ml-2"
                      type="warning">下午 </el-tag></span>
                </template>
              </el-table-column>
              <el-table-column property="reser_time" label="预约时间" show-overflow-tooltip width="180" align="center" />
              <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center;justify-content: center;">
                    <el-button type="primary" plain size="small" @click="targets(scope.row.id, scope.row)">详情</el-button>
                    <el-button v-if="scope.row.status==3||scope.row.status==4||scope.row.status==5||scope.row.status==6"  type="danger" plain size="small" :disabled="false" @click="dels(scope.row.id)">删除</el-button>
                    <el-button v-else  type="danger" plain size="small" :disabled="true">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="height: 1vh;"></div>
            <div style="display:flex;justify-content: center;">
              <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
            </div>
          </div>
        </el-card>
      </div>
    </router-view>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Bslu } from '@/api/user'
const tableData = ref([])
const datesearch = ref([])
const loading = ref(true)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
payment()
function payment() {
  Bslu().then((res) => {
    console.log(res);
    tableData.value = res.data;
    datesearch.value = res.data
    loading.value = false
  })
}
</script>